<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Advanced grid demo</title>

<!--  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">-->
  <link rel="stylesheet" href="../bootstrap.min.css">
  <link rel="stylesheet" href="demo.css" />

  <script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>

  <script src="../src/jquery.js"></script>
  <script src="../src/gridstack.js"></script>
  <script src="../src/jquery-ui.js"></script>
  <script src="../src/gridstack.jQueryUI.js"></script>

  <style type="text/css">
    .grid-stack-item-removing {
      opacity: 0.8;
      filter: blur(5px);
    }

    #trash {
      background: rgba(255, 0, 0, 0.4);
    }
  </style>
</head>

<body>
  <h1>Advanced Demo</h1>
  <div class="row">
    <div class="col-md-2 d-none d-md-block">
      <div id="trash" style="padding: 15px; margin-bottom: 15px;" class="text-center">
        <div>
          <ion-icon name="trash" style="font-size: 400%"></ion-icon>
        </div>
        <div>
          <span>Drop here to remove!</span>
        </div>
      </div>
      <div class="newWidget grid-stack-item">
        <div class="card-body grid-stack-item-content">
          <div>
            <ion-icon name="add-circle" style="font-size: 400%"></ion-icon>
          </div>
          <div>
            <span>Drag me in into the dashboard!</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-10">
      <div class="grid-stack" data-gs-animate="yes">
        <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
          <div class="grid-stack-item-content">1</div>
        </div>
        <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"
          data-gs-no-move="yes" data-gs-no-resize="yes" data-gs-locked="yes">
          <div class="grid-stack-item-content">I can't be moved or dragged!
            <br>
            <ion-icon name="ios-lock" style="font-size:300%"></ion-icon>
          </div>
        </div>
        <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2"
          data-gs-min-width="2" data-gs-no-resize="yes">
          <div class="grid-stack-item-content" style="overflow: hidden">
            <p class="card-text text-center" style="margin-bottom: 0">
              Drag me!
              <p class="card-text text-center" style="margin-bottom: 0">
                <ion-icon name="hand" style="font-size: 300%"></ion-icon>
                <p class="card-text text-center" style="margin-bottom: 0">
                  ...but don't resize me!
          </div>
        </div>
        <div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2">
          <div class="grid-stack-item-content"> 4</div>
        </div>
        <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2">
          <div class="grid-stack-item-content">5</div>
        </div>
        <div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4">
          <div class="grid-stack-item-content">6</div>
        </div>
        <div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2">
          <div class="grid-stack-item-content">7</div>
        </div>
        <div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
          <div class="grid-stack-item-content">8</div>
        </div>
        <div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
          <div class="grid-stack-item-content">9</div>
        </div>
        <div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2">
          <div class="grid-stack-item-content">10</div>
        </div>
        <div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2">
          <div class="grid-stack-item-content">11</div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    var grid = GridStack.init({
      alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      ),
      resizable: {
        handles: 'e, se, s, sw, w'
      },
      removable: '#trash',
      removeTimeout: 100,
      acceptWidgets: '.newWidget'
    });

    grid.on('added removed change', function(e, items) {
      var str = '';
      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
      console.log(e.type + ' ' + items.length + ' items:' + str );
    });

    // TODO: switch jquery-ui out
    $('.newWidget').draggable({
      revert: 'invalid',
      scroll: false,
      appendTo: 'body',
      helper: 'clone'
    });
  </script>
</body>

</html>